<app-webshark *ngIf="_data?.frame_protocol; else baseContainer" [data]="_data.raw_source || _data.message">
</app-webshark>
<ng-template #baseContainer>
  <mat-tab-group class="message-container" #matTabGroup (selectedTabChange)="onSelectedTab()">
    <mat-tab label="Message" *ngIf="raw" style="padding: 1rem;">

      <div class="time-label">{{ timeLabel }}</div>
      <ngx-json-viewer *ngIf="raw_isJSON" [json]="raw" [expanded]="true"></ngx-json-viewer>

      <div [innerHTML]="raw | safeHtml" class="raw-json" *ngIf="!raw_isJSON && type !== 'LOG'"></div>
      <pre *ngIf="!raw_isJSON && type === 'LOG'" class="raw-json">{{raw}}</pre>
    </mat-tab>

    <mat-tab label="SIP" *ngIf="pt?.sip" class="parsed-data">

      <div class="parsed-data">
        <ngx-json-viewer style="color:gray" class="sipParse" [json]="pt?.sip" [expanded]="false">
        </ngx-json-viewer>
      </div>

    </mat-tab>

    <mat-tab label="SDP" *ngIf="pt?.sdp">

      <div class="parsed-data">
        <ngx-json-viewer [json]="pt.sdp" [expanded]="false"></ngx-json-viewer>
      </div>

    </mat-tab>

    <mat-tab label="VQR" *ngIf="pt?.vqr">

      <div class="parsed-data">
        <ngx-json-viewer [json]="pt.vqr" [expanded]="true"></ngx-json-viewer>
      </div>
    </mat-tab>

    <mat-tab label="JWT" *ngIf="pt?.jwt">

      <div class="parsed-data">
        <ngx-json-viewer [json]="pt.jwt" [expanded]="true"></ngx-json-viewer>
      </div>
    </mat-tab>

    <mat-tab label="XRTP" *ngIf="pt?.xrtp">

      <div class="parsed-data">
        <ngx-json-viewer [json]="pt.xrtp" [expanded]="true"></ngx-json-viewer>
      </div>

    </mat-tab>

    <mat-tab label="Details" *ngIf="messageDetailTableData" style="padding: 1rem;">

      <div>
        <table mat-table [dataSource]="messageDetailTableData" [trackBy]="identify" class="mat-elevation-z8"
          style="width: 100%; font-size:12px !important;font-family: 'Roboto Mono', monospace !important;">
          <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef> Name </th>
            <td mat-cell *matCellDef="let element" style="font-size:12px !important;color:rgb(41, 41, 41);">
              <span>{{element.name}}</span></td>
          </ng-container>
          <ng-container matColumnDef="value">
            <th mat-header-cell *matHeaderCellDef> Value </th>
            <td mat-cell *matCellDef="let element"
              style="font-size:12px;font-family: 'Roboto Mono', monospace !important;">
              <div *ngIf="isObject(element.value); else simpleType">
                <ngx-json-viewer [json]="{details: element.value}" [expanded]="true"></ngx-json-viewer>
              </div>
              <ng-template #simpleType>
                <span style="font-size:12px;font-family: 'Roboto Mono', monospace !important;">{{element.value}}</span>
              </ng-template>
            </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="['name', 'value']" style="height:30px"></tr>
          <tr mat-row *matRowDef="let row; columns: ['name', 'value']" style="height:30px"></tr>
        </table>
      </div>
    </mat-tab>

    <mat-tab label="Decoded" *ngIf="_data?.decoded" style="padding: 1rem;">

      <div class="parsed-data">
        <ngx-json-viewer [json]="_data.decoded" [expanded]="false"></ngx-json-viewer>
      </div>
    </mat-tab>
  </mat-tab-group>
</ng-template>
